<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>历史交易量监控统计</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/monitor.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body class="monitor-body">
    <!-- 顶部导航 -->
    <nav class="navbar navbar-expand-lg navbar-dark monitor-navbar">
        <div class="container-fluid">
            <div class="navbar-brand">
                <span class="title-icon">📈</span>
                <span>历史交易量监控统计</span>
            </div>
            <div class="navbar-text">
                <a href="index.html" class="btn btn-outline-light btn-sm me-2">返回首页</a>
                <a href="transaction-monitor.html" class="btn btn-outline-light btn-sm me-2">实时监控</a>
                <a href="province-compare.html" class="btn btn-outline-light btn-sm me-2">省份环比</a>
                <span id="currentTime" class="time-display">--</span>
            </div>
        </div>
    </nav>

    <!-- 主要监控区域 -->
    <div class="container-fluid monitor-container">
        <!-- 历史交易量统计 -->
        <div class="row">
            <div class="col-12">
                <div class="monitor-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <span class="title-icon">📊</span>
                            历史交易量趋势分析
                        </h3>
                        <div class="panel-controls">
                            <div class="control-group">
                                <label class="control-label">统计维度</label>
                                <select id="statisticDimension" class="form-select form-select-sm">
                                    <option value="hour">按小时</option>
                                    <option value="day" selected>按天</option>
                                    <option value="week">按周</option>
                                    <option value="month">按月</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">时间范围</label>
                                <select id="historyTimeRange" class="form-select form-select-sm">
                                    <option value="24">最近24小时</option>
                                    <option value="168">最近7天</option>
                                    <option value="720">最近30天</option>
                                    <option value="2160" selected>最近3个月</option>
                                    <option value="4320">最近6个月</option>
                                    <option value="8760">最近1年</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">中心</label>
                                <select id="historyCenterSelect" class="form-select form-select-sm">
                                    <option value="">全部中心</option>
                                    <option value="hf">合肥中心</option>
                                    <option value="yz">亦庄中心</option>
                                    <option value="lf">廊坊中心</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">服务平台</label>
                                <select id="historyServicePlatSelect" class="form-select form-select-sm">
                                    <option value="">全部平台</option>
                                    <option value="web">Web服务</option>
                                    <option value="jk">接口服务</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">渠道</label>
                                <select id="historyChelCodeSelect" class="form-select form-select-sm">
                                    <option value="">全部渠道</option>
                                    <option value="01">网上银行</option>
                                    <option value="02">手机银行</option>
                                    <option value="03">柜台</option>
                                    <option value="04">ATM</option>
                                    <option value="05">第三方</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="historyChart" class="chart-container"></div>
                        
                        <!-- 统计数据卡片 -->
                        <div class="row mt-4">
                            <div class="col-md-4">
                                <div class="stat-card">
                                    <div class="stat-icon">📊</div>
                                    <div class="stat-value" id="totalHistoryVolume">--</div>
                                    <div class="stat-label">总交易量</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="stat-card">
                                    <div class="stat-icon">📈</div>
                                    <div class="stat-value" id="peakHistoryVolume">--</div>
                                    <div class="stat-label">峰值交易量</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="stat-card">
                                    <div class="stat-icon">⚡</div>
                                    <div class="stat-value" id="avgHistoryVolume">--</div>
                                    <div class="stat-label">平均交易量</div>
                                </div>
                            </div>
                        </div>

                        <!-- 数据说明 -->
                        <div class="chart-legend mt-3">
                            <div class="legend-item">
                                <div class="legend-color" style="background: #4FC3F7;"></div>
                                <span>总交易量：选定时间范围内的历史交易量</span>
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background: #81C784;"></div>
                                <span>成功笔数：交易成功的笔数统计</span>
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background: #F44336;"></div>
                                <span>失败笔数：交易失败的笔数统计</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态指示器 -->
    <div id="statusIndicator" class="status-indicator">
        <div class="status-dot"></div>
        <span class="status-text">连接正常</span>
    </div>

    <!-- 加载中遮罩 -->
    <div id="loadingOverlay" class="loading-overlay hidden">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
        <div class="loading-text">正在加载历史交易量数据...</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/charts.js"></script>
    <script src="js/history-monitor.js"></script>
</body>
</html>